<template>
  <el-card class="box-card">
    <div class="user-container">
      <!-- 添加用户 -->
      <div>
        <el-button class="usner-add-bt" type="primary" size="medium" @click="addUser">新增用户</el-button>
      </div>

      <!-- 导航栏 -->
      <div class="user-search">
        <el-form class="search-form" ref="searchFormRef" :model="searchForm" label-width="80px">
          <el-form-item class="search-form-input" label="用户名称">
            <el-input placeholder="请输入" v-model="searchForm.role"></el-input>
          </el-form-item>
          <el-form-item class="search-form-select" label="状态">
            <el-select v-model="searchForm.is_deleted" placeholder="请选择">
              <el-option label="禁用" value="0"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="search-form-select" label="角色">
            <el-select v-model="searchForm.username" placeholder="请选择">
              <el-option v-for="item in $store.state.roleRightList" :key="item.id" :label="item.title" :value="item.title"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <!-- 搜索按钮 -->
        <div class="search-btn">
          <el-button>清除</el-button>
          <el-button type="primary" @click="OnSearchUser">搜索</el-button>
        </div>
      </div>

      <!-- 数据展示 -->
      <div class="user-list">
        <el-table :data="userList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="role" label="用户名" />
          <el-table-column prop="username" label="角色" />
          <el-table-column prop="permission_group_id" label="权限组id" width="100" />
          <el-table-column prop="permission_group_title" label="权限组名称" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column label="状态" width="60">
            <template v-slot="slotProps">
              {{slotProps.row.is_deleted ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="注册时间" width="160">
            <template v-slot="slotProps">
              {{slotProps.row.create_time | formatTime}}
            </template>
          </el-table-column>
          <el-table-column prop="last_update_time" label="最近登录时间" width="160">
            <template v-slot="slotProps">
              {{slotProps.row.last_update_time | formatTime}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template v-slot="slotProps">
              <a href="javascript:;" @click="editUser(slotProps.row)">修改</a>
              <a href="javascript:;" @click="slotProps.row.is_deleted = !slotProps.row.is_deleted">{{slotProps.row.is_deleted ? '启用' : '禁用'}}</a>
              <a href="javascript:;" @click="deleteUser(slotProps.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="user-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[3, 5, 7, 10, 20]" :page-size="queryInfo.pagesize" layout="total, pager, prev , sizes, next, jumper" :total="total" background>
        </el-pagination>
      </div>

      <!-- 添加 | 编辑 ：用户 -->
      <user-add :visible.sync="addDialogVisible" @success="loaderUserList()" />
      <user-edit :visible.sync="editDialogVisible" @success="loaderUserList()" :user="user" />
    </div>
  </el-card>

</template>

<script>
import { getUserList, deleteUser } from '@/assets/api/user/user.js'
import UserAdd from './components/UserAdd'
import UserEdit from './components/UserEdit'

export default {
  name: 'UserList',
  components: {
    'user-add': UserAdd,
    'user-edit': UserEdit
  },
  created () {
    this.loaderUserList()
    this.$store.dispatch('loaderRightList')
  },
  data () {
    return {
      // 用户请求字符串
      queryInfo: {
        page: 1, // 当前页数
        pagesize: 20, // 页尺寸
      },
      // 搜索表单
      searchForm: {
        role: '', // 用户名称
        is_deleted: '', // 状态
        username: '' // 角色
      },
      // 用户列表
      userList: [],
      // 用户列表 - 展示
      userListShow: [],
      // 用户列表总数
      total: 0,
      // 添加用户对话框
      addDialogVisible: false,
      // 编辑用户对话框
      editDialogVisible: false,
      // 当前行信息
      user: {},
      // 配型判断：添加 | 编辑
      isEdit: false
    }
  },
  methods: {
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.loaderUserList()
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.loaderUserList()
    },
    // 加载用户列表
    async loaderUserList () {
      try {
        const { data: res } = await getUserList(this.queryInfo)
        this.userList = res.list
        this.total = res.counts
      } catch (err) {
        console.log(err.response)
      }
    },
    // 添加用户
    addUser () {
      this.isEdit = false
      this.addDialogVisible = true
    },
    // 编辑用户
    editUser (user) {
      this.editDialogVisible = true
      this.user = user
    },
    // 搜索用户
    OnSearchUser () {
      console.log(this.searchForm)
    },
    // 删除用户
    deleteUser (rowInfo) {
      this.$msgbox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteUser(rowInfo.id)
          this.$message.success('删除用户成功')
          this.loaderUserList()
        } catch (err) {
          this.$message.error('删除用户失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style  lang='less' scoped>
.user-container {
  .user-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

    .search-form {
      display: flex;
      height: 100%;
      justify-content: space-around;

      .search-form-input {
        margin: unset;

        /deep/ .el-form-item__label {
          width: 69px !important;
          height: 40px;
          background-color: #f2f2f2;
          font-size: 12px;
          vertical-align: middle;
          text-align: center;
          line-height: 40px;
          padding: 0 10px;
        }

        /deep/ .el-form-item__content {
          line-height: unset;
          margin-left: 69px !important;

          .el-input {
            width: 223px;
            height: 40px;
            margin-right: 30px;

            .el-input__inner {
              height: 100%;
            }
          }
        }
      }

      .search-form-select {
        margin: unset;

        /deep/ .el-form-item__label {
          width: 69px !important;
          height: 40px;
          background-color: #f2f2f2;
          font-size: 12px;
          vertical-align: middle;
          text-align: center;
          line-height: 40px;
          padding: 0 10px;
        }

        /deep/ .el-form-item__content {
          line-height: unset;
          margin-left: 69px !important;

          .el-input {
            width: 162px;
            height: 40px;
            margin-right: 30px;

            .el-input__inner {
              height: 100%;
            }
          }
        }
      }
    }

    .search-btn {
      /deep/ .el-button {
        width: 72px;
        height: 40px;
        line-height: 40px;
        padding: unset;
      }
    }
  }

  .user-list {
    a {
      text-decoration: none;
      margin-right: 15px;
      color: #4f99eb;
    }
    a:hover {
      text-decoration: underline;
    }
  }

  .user-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 80px;
  }
}
</style>
